import { FC } from 'react'
import QuestionTitleConf, { type QuestionTitleProps } from './question-title'
import QuestionInputConf, { type QuestionInputProps } from './question-input'
import QuestionParagraphConf, { type QuestionParagraphProps } from './question-paragraph'
import QuestionInfoConf, { type QuestionInfoProps } from './question-info'
import QuestionTextareaConf, { type QuestionTextareaProps } from './question-textarea'
import QuestionRadioConf, { type QuestionRadioProps } from './question-radio'
import QuestionCheckboxConf, { type QuestionCheckboxProps } from './question-checkbox'

export type ComponentPropsType = QuestionInputProps &
  QuestionTitleProps &
  QuestionParagraphProps &
  QuestionInfoProps &
  QuestionTextareaProps &
  QuestionRadioProps &
  QuestionCheckboxProps

export type ComponentConfType = {
  title: string
  type: string
  Component: FC<ComponentPropsType>
  Prop: FC<ComponentPropsType>
  defaultProps: ComponentPropsType
}

const componentConfList: Array<ComponentConfType> = [
  QuestionInputConf,
  QuestionTitleConf,
  QuestionParagraphConf,
  QuestionInfoConf,
  QuestionTextareaConf,
  QuestionRadioConf,
  QuestionCheckboxConf,
]

export const componentConfGroups = [
  {
    groupName: '文本显示',
    components: [QuestionTitleConf, QuestionParagraphConf, QuestionInfoConf],
  },
  {
    groupName: '用户输入',
    components: [QuestionInputConf, QuestionTextareaConf],
  },
  {
    groupName: '用户选择',
    components: [QuestionRadioConf, QuestionCheckboxConf],
  },
]

export function getComponentConfByType(type: string): ComponentConfType {
  return componentConfList.find(c => c.type === type)!
}
